<template>
  <div>
    <el-menu
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :default-active="activeIndex"
      router
    >
      <navMenu :navMenus="menuData"></navMenu>
    </el-menu>
  </div>
</template>

<script>
  import api from "../../../axios/api"
  import navMenu from '@/components/back/navMenu.vue'
  export default {
    components: {
      navMenu: navMenu
    },
    data() {
      return {
        activeIndex: '/back/team',
        menuData: [

        ]
      };
    },
    methods:{
    setDataFromAxios:function(){
      //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
      api.setDataFromAxios("/menuData",null,"post")
        .then(res=>{this.menuData = res.menuData});//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
    },
  },
  //vue init方法 当前页面初始化就自动执行的方法 一般用于页面初始化就读取数据
  created:function () {
    this.setDataFromAxios();//1.创建页面的时候 调用自定义的数据请求方法  而数据请求方法把得到数据赋值给了当前页面的变量
   }
  };
</script>

<style>
</style>
